<template>
  <m-window-frame
    :title="$t('图表属性')"
    style="height: 100%"
    class="v-chart-property-window"
    :cancelText="$t('关闭')"
    :okText="''"
    @cancel="handleCancel"
    @ok="handleSave"
  >
    <div class="_main g-fd-c">
      <AttrTips
        class="_main-title g-flex-0"
        :type="'ChartProperty'"
      ></AttrTips>
      <div class="_main-content g-pd-16">
        <ChartProperties
          :diagramSts="diagramSts"
          :defaultConfig="defaultConfig"
          @stepValueChange="stepValueChange"
        ></ChartProperties>
      </div>
    </div>
  </m-window-frame>
</template>
<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import { ref, watch } from "vue";
import { Params, CloseData } from "./index";
import { useRoute } from "vue-router";
import { ipcWindowUtil } from "@/mdesign-lib/mdesign-app.umd.js";
import AttrTips from "@/common/attrTip/AttrTip.vue";
import ChartProperties from "./components/ChartProperties.vue";

const result: Record<string, any> = {};
const diagramSts = ref("");
const defaultConfig = ref([]);
const route = useRoute();
watch(
  () => route.fullPath,
  () => {
    const routeQuery = route.query as unknown;
    const query = routeQuery as Params;
    diagramSts.value = query.diagramSts;
    defaultConfig.value = JSON.parse(query.defaultConfig || "[]");
  },
  { immediate: true }
);

const stepValueChange = (val: any, path: string[]) => {
  ipcWindowUtil.sendWindowChange({ success: true, key: path[0], value: val });
};

const handleSave = async () => {
  ipcWindowUtil.sendWindowChange({ success: true, result });
};

function handleclose(data: CloseData) {
  ipcWindowUtil.closeWindow(data);
}
function handleCancel() {
  handleclose({ success: false, result });
}
</script>
<style lang="scss">
.v-chart-property-window {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
